<template>
	<view class="container">
		<view class="avatar-box">
			<u-upload width="98" height="98" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
				:maxCount="1"></u-upload>
		</view>
		<!-- <image class="avatar-box" src="@/static/mine/default_avatar.png" mode=""></image> -->
		<view class="list-cell">
			<view class="cell-box">
				<view class="cell-left">
					<view class="label">圈子名称</view>
					<view class="value">
					</view>
				</view>
				<view class="cell-right">
					<u--input maxlength="15" placeholder="请输入圈子名称" border="surround" v-model="formData.name"></u--input>
				</view>
			</view>

			<view class="cell-box">
				<view class="cell-left">
					<view class="label">圈子人数</view>
				</view>
				<view class="cell-right">
					<u--input type="number" maxlength="5" placeholder="请输入圈子人数" border="surround"
						v-model="formData.people"></u--input>
				</view>
			</view>
			<view class="cell-box">
				<view class="cell-left">
					<view class="label">圈子类型</view>
				</view>
				<view class="cell-right" @click="showType = true">
					<view class="u-input">
						<text class="plach" v-if="!formData.type">请选择</text>
						<text v-else>{{formData.type_name}}</text>
					</view>
				</view>
			</view>
			<view class="cell-box">
				<view class="cell-left" style="display: flex;">
					<view class="label">圈子状态</view>
					<view class="value">
						<u-switch v-model="formData.status"></u-switch>
					</view>
				</view>
			</view>
		</view>
		<u-picker @cancel="showType=false" @confirm="onConfirm" keyName="name" :show="showType"
			:columns="sheetTypeList"></u-picker>
		<!-- 	<u-action-sheet @close="showType = false" @select="onActionType" round="24" cancelText="取消"
			:actions="sheetTypeList" :show="showType">
		</u-action-sheet> -->
		<cu-button-wrap>
			<u-button :customStyle="{width:'614rpx',height:'104rpx',borderRadius:'104rpx'}" type="primary" text="保存"
				@click="onSave"></u-button>
		</cu-button-wrap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalDelShow: false,
				formData: {
					name: '',
					type: '',
					type_name: '',
					cover: '',
					people: '',
					status: false
				},
				modalExitShow: false,
				showType: false, //类型弹窗
				sheetTypeList: [[{
						name: '公开',
						id: '1'
					},
					{
						name: '私密',
						id: '2'
					}
				]], //类型列表
				fileList: []
			}
		},
		onLoad() {
			// this.loadList();
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					console.log('lists', lists[i]);
					const result = await this.$Net.upload(lists[i].url, 0)
					console.log('result', result);
					let item = this.fileList[fileListLen]
					if (result.status != 200) {
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'failed',
							message: '上传失败',
							url: ''
						}))
					}else{
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result.data.url
						}))
					}
					// this.fileList[0].status = 'success'
					// this.fileList[0].url = result.url
					
				}
			},

			onSave() {
				if (this.fileList.length > 0) {
					this.formData.cover = this.fileList[0].url;
				}
				console.log('-------------cccc', this.fileList);
				//  状态:0不可用，1可用
				this.formData.status = this.formData.status ? 1 : 0;
				this.$Net.post(this.$api.group_create, this.formData).then(res => {
					this.$Msg.Toast(res.msg)
					this.$Jump.Back()
					uni.$emit('updateGroupList');
				})
			},
			// 类型确定
			onConfirm(e) {
				this.formData.type = e.value[0].id;
				this.formData.type_name = e.value[0].name;
				this.showType = false;
			},
			// 类型列表
			loadList() {
				this.$Net.get(this.$api.group_list_cate, {}).then(res => {
					this.sheetTypeList = [res];
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 32rpx 68rpx;

		.avatar-box {
			width: 98px;
			height: 98px;
			border-radius: 24rpx;
			margin: 0 auto 80rpx;
			display: block;
			overflow: hidden;
			background: #F1F1F1;
		}

		.list-cell {
			width: 100%;
			margin-bottom: 148rpx;

			.cell-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;
				margin-bottom: 56rpx;

				.cell-left {

					align-items: center;
					justify-content: space-between;
					display: block;
					width: 100%;

					.label {
						color: #000;
						font-family: "PingFang SC";
						font-size: 36rpx;
						font-weight: 400;
					}

				}

				.cell-right {
					width: 100%;
					margin-top: 24rpx;

					text {
						line-height: 100rpx;
						padding: 0 24rpx;
					}

					.plach {
						color: rgba(0, 0, 0, 0.40);
						font-family: "PingFang SC";
						font-size: 16px;
						font-weight: 400;
						line-height: 100rpx;
						padding: 0 24rpx;
					}

					::v-deep .u-input {
						border-radius: 24rpx;
						background: #F1F1F1;
						height: 100rpx;

						input {
							color: rgba(0, 0, 0, 0.40);
							font-family: "PingFang SC";
							font-size: 32rpx;
							font-weight: 400;
						}
					}
				}
			}
		}

		.btn-text {
			color: #FF5F5F;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-weight: 400;
			margin-bottom: 32rpx;
		}

		.text-exit {
			color: #000;
		}
	}

	::v-deep .uicon-camera-fill {
		font-size: 35px !important;
	}
</style>
